<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for OLAP</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          云原生数据库 TeleDB for
          OLAP是基于开源技术提供的分布式实时分析型列式数据库服务，具有高性能低成本、开箱即用、企业级特性支持的特点。可应用于流量分析、广告精准营销分析、用户画像、敏捷交互BI、数据集市、实时监控、分布式服务和链路监控等业务场景。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div
          class="list-box mt-20"
          v-for="(item, index) in list"
          :key="index"
          v-if="index == 0"
        >
          <div class="title">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </div>
          <div class="mb-20">{{ item.label }}</div>
        </div>
        <div class="flex-grid mt-20 mb-20">
          <div
            class="list-box"
            v-for="(item, index) in list"
            :key="index"
            v-if="index != 0"
          >
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <div class="scene-list2">
          <div class="list" v-for="(item, index) in sceneList" :key="index">
            <span class="icon"><img :src="item.iconUrl" alt="" /></span>
            <dl>
              <dt>{{ item.name }}</dt>
              <dd>{{ item.label }}</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav3',
  data () {
    return {
      list: [
        {
          name: '高性能低成本',
          label:
            '充分发挥分布式多核并行优势（SIMD 高效指令集、向量化执行引擎），提供50MB-200MB/S的实时导入能力，查询性能较传统方式提升100-1000倍；支持列级高压缩率，大幅提升单机数据存储和计算能力，降低使用成本。'
        },
        {
          name: '开箱即用',
          label:
            '支持一键可视化完成集群部署、参数配置、监控运维体系搭建等，简单易用，降低使用门槛。'
        },
        {
          name: '企业级特性支持',
          label:
            '支持多租户资源隔离，数据重分布均衡，弹性扩缩，全数据链路打通等企业级特性。'
        }
        // { name: '全面运维体系及领域专家支持', label: '提供磁盘、CPU、内存、IOPS、数据库连接、读写量、TPS、ZK、慢SQL等全方位监控诊断体系支撑；数据库领域专家支持，实时解惑答疑。' }
      ],
      sceneList: [
        {
          iconUrl: require('../../assets/images/icon/ico-r-01.png'),
          name: '用户行为分析',
          label:
            '将用户的登录、轨迹、时长等行为数据导入到ClickHouse 中，构建用户特征分析大宽表，借助ClickHouse 的优异查询性能进行实时多维分析，构建用户画像，为精准营销和精细化运营等提供强力支持。'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r-02.png'),
          name: '企业经营分析',
          label:
            '利用ClickHouse构建实时交互式查询报表，实时分析订单、收入、客户数等核心业务指标。在百亿记录规模及上百数据分析维度下，可获得100毫秒级的响应，让客户随时进行个性化统计，实现交互式不间断分析，提高商业决策效率。'
        }
        // {
        //   iconUrl: require('../../assets/images/icon/ico-r3-003.png'),
        //   name: '基于实时客户圈选的精准营销',
        //   label: '基于实时客户圈选的精准营销：基于历史大数据计算，支持实时用户行为数据清洗计算。基于用户的历史标签和实时标签数据，进行用户圈选营销，提高客户召回率和DAU。'
        // }
      ],
      frameworkImg: require('../../assets/images/pic/img-3.png')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
</style>
